/**
 * Created by 丶龟 on 2017/8/25.
 */

"use strict";

//=============
// 引入程序依赖
//=============
import React, { Component } from 'react' ;
import { connect } from 'react-redux' ;
import { browserHistory } from 'react-router' ;
import NetworkEngine from '../../../utils/NetworkEngine' ;
import UrlManager from '../../../utils/UrlManager' ;
import { mapStateToProps, mapDispatchToProps } from './DemandDetailRedux';
import ErrorBar from "../../../components/Public/ErrorBar/ErrorBar" ;

//images
import xiala from "../../../static/img/h5/xiala.png";
import head from "../../../static/img/h5/head.png"
import V from "../../../static/img/h5/V-geren.png";
import qiyeV from "../../../static/img/h5/V-qiye.png";
import tx from "../../../static/img/film/moren-tx.png";
import logo from "../../../static/img/h5/logo-h5.jpg";
import './DemandDetail.scss'

var weixinUrl = location.href.split('#')[0];

class DemandDetailContainer extends Component{
    constructor(props){
        super(props) ;
        this.state={
            id:null,
            pageSize:1,
            list:[],
            taskId:'',
            detail:null,
            registration:[],
            commentList : [],
            defPageSize : 5,
            sourceFlg : "only",
            totalCount : 0,
            typeFlg: "other",
            comment:null,
            textAreaType : 0,
            placeholder : "你也来说俩句吧",
            userKeyId : '',
        }
    }

    componentWillMount() {
        this.state.taskId = `${this.props.params.id}`;
        this.isWeixn();
        this.list();
        this.great();
    }

    componentDidMount() {
        let id = sessionStorage.getItem('id');
        this.state.id = id;
        if (id == null) {
            $(this.refs.height).css("bottom","1.35rem");
        } else {
            $(this.refs.height).css("bottom","0");
            $(this.refs.height).css("overflow-y","visible");
        }
        this.state.userKeyId = sessionStorage.getItem("userKeyId");
        this.state.clientIp = window.location.hostname;
        this.initGeetestFun();
        this.getAuth();
    }

    isWeixn(){
        let ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)=="micromessenger") {
            this.setState({
                isWeixn:1
            })
        } else {
            this.setState({
                isWeixn:0
            })
        }
    }

    list() {
        var url = window.location.href;
        if (url.indexOf("?") > -1) {
            window.location.href = url.split("?")[0];
            return;
        }
        weixinUrl = weixinUrl.replace(/\//g, '_');
        let urlManager = new UrlManager();
        NetworkEngine(
            "get",
            urlManager.shareWeiXinDemand() + "/" + weixinUrl,
        ).then(
            data => {
                console.log('data///...............',data);
                this.shareSuccess(data.data)
            }
        ).catch(
            err => {
            }
        )
    }

    shareSuccess(data) {
        // let _this = this;
        // let title = _this.state.title;
        // let videoImgUrl = _this.state.videoImgUrl;
        // let des = _this.state.introduction;
        // let videoUrl = window.location.href;
        /*---------------微信分享------------------*/
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: 'wxae5b39ca398c9f2f', // 必填，公众号的唯一标识
            // appId: 'wx4002b019d6429df6', // 必填，公众号的唯一标识
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature,// 必填，签名，见附录1
            jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        wx.ready(function () {
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            // console.log("title:" + _this.state.title);
            // console.log("VideoUrl:" + videoUrl);
            // console.log("videoImgUrl:" + videoImgUrl);

            // let that = _this;
            wx.onMenuShareTimeline({
                title: data.title, // 分享标题
                link: data.videoUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                //imgUrl: localStorage.getItem("videoImg"), // 分享图标
                imgUrl: 'http://video.mizhimedia.com/image/logo-h5.jpg', // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
            wx.onMenuShareAppMessage({
                title: data.title, // 分享标题
                desc: data.des, // 分享描述
                link: data.videoUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'http://video.mizhimedia.com/image/logo-h5.jpg', // 分享图标
                type: 'link', // 分享类型,music、video或link，不填默认为link
                //dataUrl: data.videoUrl, // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
        });
        wx.error(function (res) {
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        });
    }

    getAuth() {
        let urlManager = new UrlManager();
        NetworkEngine(
            "post",
            urlManager.reAuthentication(), {
                userId:sessionStorage.getItem("id"),
                userKeyId:sessionStorage.getItem("userKeyId"),
            }
        ).then(
            data => {
                let auth = data.data;
                let status = 0;
                if (auth.data.status == 1) {
                    status = 4;
                } else if (auth.data.status == 4) {
                    status = 4;
                }
                this.setState({
                    type: auth.data.type,
                    authenticationStatus: status + ''
                })
            }
        ).catch(
            err => {
                //失败执行
            }
        )
    }

    great(){
        this.initialDemandDetail();
    }

    //需求详情
    initialDemandDetail() {
        let urlManager = new UrlManager();
        NetworkEngine(
            "post",
            urlManager.mobileDemandDetail(),
            {
                taskId:this.state.taskId,
                userKeyId:sessionStorage.getItem("userKeyId"),
                userId:sessionStorage.getItem("id")
            }
        ).then(
            data => {
                this.setState({
                    detail: data.data.data
                })
            }
        ).catch(
            err => {
            }
        )
    }

    //报名用户
    initialRegistration() {
        let urlManager = new UrlManager();
        NetworkEngine(
            "post",
            urlManager.registrationList(),
            {
                taskId:this.state.taskId,
                userKeyId:sessionStorage.getItem("userKeyId")
            }
        ).then(
            data => {
                this.state.id = sessionStorage.getItem('id');
                this.setState({
                    registration: data.data.data
                })
            }
        ).catch(
            err => {
            }
        )
    }

    //需求评价
    mobileDemandComments() {
        this.initComment();
        let urlManager = new UrlManager();
        NetworkEngine(
            "post",
            urlManager.mobileDemandComments(),
            {
                taskId:this.state.taskId,
                userKeyId:sessionStorage.getItem("userKeyId"),
                sourceFlg:this.state.sourceFlg,
                defPageSize:this.state.defPageSize
            }
        ).then(
            data => {
                this.state.id = sessionStorage.getItem('id');
                let list = data.data.data;
                let count = 0;
                if (list) {
                    count = list[0].commentCount;
                }
                this.state.totalCount = count;
                this.setState({
                    commentList: list
                })
            }
        ).catch(
            err => {
            }
        )
    }
    logoShow(item){
        if (item.authStatus == 1) {
            if (item.authType == "0") {
                return <img src={V} alt="图标"/>
            } else {
                return <img src={qiyeV} alt="图标"/>
            }
        } else {
            return <span></span>
        }
    }

    //进入个人主页
    selfMine() {
        this.queryCreator(sessionStorage.getItem("id"));
    }

    //进入个人主页
    queryCreator(taskCreateorId) {
        //console.log(taskCreateorId);
        localStorage.setItem("personalId",taskCreateorId);
        var id = taskCreateorId.replace(/\//g, '_').replace(/\+/g, '_').replace(/\=/g, '');
        var viewerKey = sessionStorage.getItem("viewerKey");
        if(viewerKey == null || viewerKey == ""){
            viewerKey = "0";
        }
        window.location.href="/App/MobileMine/"+id+'/'+viewerKey;
        window.scrollTo(0,0);
    }

    mobileDemand() {
        browserHistory.push("/App/MobileDemand");
    }

    //转换金额方法
    moneyFormatFun(num) {
        if (!num) {return ""}
        var result = [ ], counter = 0;
        num = (num || 0).toString().split('');
        for (var i = num.length - 1; i >= 0; i--) {
            counter++;
            result.unshift(num[i]);
            if (!(counter % 3) && i != 0) { result.unshift(','); }
        }
        return result.join('');
    }

    //还原HTML脚本语言
    unescapeHTML(description) {
        let html = description.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&apos;/g, "'");
        //需求详细
        return {__html:html};
    }

    //判断附件的显示状态
    showAttachment(){
        let taskAttachmentName = this.state.detail.taskAttachmentName;
        let taskAttachment = this.state.detail.taskAttachment;
        let dlRegisterOnlyFlg = this.state.detail.dlRegisterOnlyFlg;
        let taskCreateorId = this.state.detail.taskCreateorId;
        let registFlg = this.state.detail.registFlg;
        if (!taskAttachmentName) {
            return '无附件';
        }
        //如果是发布者自己查看自己的需求 则和其他判断属性无关  始终可以看到
        if(this.state.id && taskCreateorId == this.state.id){
            return(
                <a href={taskAttachment+'?attname='+taskAttachmentName}
                   onClick={(e)=>{MtaH5.clickStat('h5_download');}}
                   download="taskAttachmentName" >{taskAttachmentName}</a>
            )
        }else{
            //只允许报名者下载该附件FLG  1:是；2：否
            if(dlRegisterOnlyFlg == '2'){//存在附件 且未选择报名者可见 直接显示
                return(
                    <a href={taskAttachment+'?attname='+taskAttachmentName}
                       onClick={(e)=>{MtaH5.clickStat('h5_download');}}
                       download="taskAttachmentName" >{taskAttachmentName}</a>
                )
            }else if(dlRegisterOnlyFlg == '1'){//存在附件 且选择报名者可见  需要判断当前登录人是否已经报名
                //判断当前登录者是否已经报名
                if(this.state.id && registFlg){//当前登录人 已经报名
                    return(
                        <a href={taskAttachment+'?attname='+taskAttachmentName}
                           onClick={(e)=>{MtaH5.clickStat('h5_download');}}
                           download="taskAttachmentName" >{taskAttachmentName}</a>
                    )
                }else{
                    return '仅报名者可见';
                }
            }
        }

    }

    tabClick(tabInt) {
        if (tabInt == 1) {
            $(".tab-1").css("display","block");
            $(".tab-2").css("display","none");
            $(".tab-3").css("display","none");
            $(".button-1").css("border-bottom",".08rem solid #f7ca0f");
            $(".button-1").css("color","#111111");
            $(".button-1").css("font-weight","500");
            $(".button-2").css("border-bottom",".08rem solid #fff");
            $(".button-2").css("color","#565a5c");
            $(".button-2").css("font-weight","300");
            $(".button-3").css("border-bottom",".08rem solid #fff");
            $(".button-3").css("color","#565a5c");
            $(".button-3").css("font-weight","300");
        } else if (tabInt == 2){
            $(".tab-1").css("display","none");
            $(".tab-2").css("display","block");
            $(".tab-3").css("display","none");
            $(".button-1").css("border-bottom",".08rem solid #fff");
            $(".button-1").css("color","#565a5c");
            $(".button-1").css("font-weight","300");
            $(".button-2").css("border-bottom",".08rem solid #f7ca0f");
            $(".button-2").css("color","#111111");
            $(".button-2").css("font-weight","500");
            $(".button-3").css("border-bottom",".08rem solid #fff");
            $(".button-3").css("color","#565a5c");
            $(".button-3").css("font-weight","300");
            this.initialRegistration();
        } else if (tabInt == 3){
            $(".tab-1").css("display","none");
            $(".tab-2").css("display","none");
            $(".tab-3").css("display","block");
            $(".button-1").css("border-bottom",".08rem solid #fff");
            $(".button-1").css("color","#565a5c");
            $(".button-1").css("font-weight","300");
            $(".button-2").css("border-bottom",".08rem solid #fff");
            $(".button-2").css("color","#565a5c");
            $(".button-2").css("font-weight","300");
            $(".button-3").css("border-bottom",".08rem solid #f7ca0f");
            $(".button-3").css("color","#111111");
            $(".button-3").css("font-weight","500");
            this.showOnlyComment();
        }
    }

    demandEnroll() {
        MtaH5.clickStat('h5_enroll_01');
        $(this.refs.alertBgm).show();
    }

    demandEnter() {
        $(this.refs.alertBgm).hide();
    }
    showOnlyComment() {
        this.state.sourceFlg = "only";
        this.mobileDemandComments();
    }
    showAllComment() {
        this.state.sourceFlg = "all";
        this.mobileDemandComments();
    }

    cancle() {
        if (this.refs.textarea) {
            this.refs.textarea.value = "";
        }
    }
    initComment() {
        this.cancle();
        this.state.comment = null;
        this.setState({
            placeholder: "你也来说俩句吧",
            textAreaType:0
        })
    }
    showModal(comment) {
        if (!sessionStorage.getItem('id')) {
            return;
        }
        if (sessionStorage.getItem('id') == comment.commenterId) {
            this.setState({
                typeFlg: "self"
            })
        } else {
            this.setState({
                typeFlg: "other"
            })
        }
        this.state.comment = comment;
        $(this.refs.modalBgm).show();
    }
    cancelModal() {
        $(this.refs.modalBgm).hide();
    }
    replyModal(){
        let placeholder = "回复"+this.state.comment.commenterName;
        this.setState({
            placeholder: placeholder,
            textAreaType:1
        })
        $(this.refs.modalBgm).hide();
    }
    deleteComment(){
        let item = this.state.comment;
        let urlManager = new UrlManager();
        NetworkEngine(
            "post",
            urlManager.deleteComments(), {
                taskId: item.taskId,//需求Id
                beCommenterId : item.beCommenterId,//被回复者Id
                commentId: item.commentId,//评论Id
            }
        ).then(
            data => {
                $(this.refs.modalBgm).hide();
                this.mobileDemandComments();
            }
        ).catch(
            err => {
                $(this.refs.modalBgm).hide();
                //失败执行
            }
        )
    }
    //提交评论
    insertComment() {
        let tempStr = this.refs.textarea.value.replace(/(^\s*)|(\s*$)/g, "");
        if(tempStr.length < 1){
            return null;
        }
        let param = {
            taskId: this.state.taskId,//需求Id
            commentContent: this.refs.textarea.value,//评论内容
            rootCommentId: 0,//根节点  第一次的根节点为'0'
            insertUserId : this.state.id,//登登录者Id
            commenterId : this.state.id,//评论者Id（即为登录者Id）
            userKeyId : sessionStorage.getItem("userKeyId"),
            gtServerStatus : 2,
        };
        let urlManager = new UrlManager();
        NetworkEngine(
            "post",
            urlManager.insertCommentGeetest(), param
        ).then(
            data => {
                this.state.captchaObj.reset();
                if (data.data.status === '1' && data.data.error_message) {
                    //失败 报错
                    this.showErrorBar(data.data.error_message);
                } else if (data.data.status === '0') {
                    // 评论提交过多，请进行验证
                    if (data.data.data + '' === '-1') {
                        this.state.commentParam = param;
                        //评论需要极验证
                        $(this.refs.geetestCommentBox).show();
                        this.state.checkType = "insert";
                        // $('.geetest_btn').click();
                    } else {
                        this.mobileDemandComments();
                    }
                }
            }
        ).catch(
            err => {
                this.mobileDemandComments();
            }
        )
    }

    //GT onSuccess内调用 发布评论进行极验证
    insertCommentFunGt(verifyObj) {
        let param = this.state.commentParam;
        param.clientType =  "h5",
        param.clientIp =  this.state.clientIp ? this.state.clientIp : null;
        param.fnGeetestChallenge =  verifyObj.geetest_challenge;
        param.fnGeetestValidate =  verifyObj.geetest_validate;
        param.fnGeetestSeccode =  verifyObj.geetest_seccode;
        param.gtServerStatus =  verifyObj.gtServerStatus;
        let urlManager = new UrlManager();
        NetworkEngine(
            "post",
            urlManager.insertCommentGeetest(), param
        ).then(
            data => {
                this.state.captchaObj.reset();
                this.state.checkType = "";
                if (data.data.status === '0') {
                    this.mobileDemandComments();
                } else if (data.data.status === '0' && data.data.error_message) {
                    //失败 报错
                    this.showErrorBar(data.data.error_message);
                }
            }
        ).catch(
            err => {
                //失败执行
            }
        )
    }

    //回复评论
    revertCommand(){
        let temp = this.refs.textarea.value.replace(/(^\s*)|(\s*$)/g, "");
        if(temp.length < 1){
            return null;
        }
        let item = this.state.comment;
        let urlManager = new UrlManager();
        let param = {
            taskId: this.state.taskId,//需求Id
            parentCommentId: item.commentId,//父评论Id
            commentContent: this.refs.textarea.value,//评论内容
            rootCommentId : item.rootCommentId > 0 ? item.rootCommentId : item.commentId,//如果被回复的人有根节点则使用它的根节点，如果被回复的人没有根节点则使用他的评论Id
            beCommenterId : item.commenterId, //被回复者Id
            insertUserId : this.state.id,//登录者Id
            commenterId : this.state.id,//评论者Id（即为登录者Id）
            userKeyId : sessionStorage.getItem("userKeyId"),
            gtServerStatus : 2,
        }
        NetworkEngine(
            "post",
            urlManager.insertCommentGeetest(), param
        ).then(
            data => {
                this.state.captchaObj.reset();
                if (data.data.status === '1' && data.data.error_message) {
                    //失败 报错
                    this.showErrorBar(data.data.error_message);
                } else if (data.data.status === '0') {
                    // 评论提交过多，请进行验证
                    if (data.data.data + '' === '-1') {
                        // this.showErrorBar("评论提交过多，请进行验证");
                        //评论需要极验证
                        this.state.commentParam = param;
                        $(this.refs.geetestCommentBox).show();
                        this.state.checkType = "revert";
                        // $('.geetest_btn').click();
                    } else {
                        this.mobileDemandComments();
                    }
                }
            }
        ).catch(
            err => {
                this.mobileDemandComments();
            }
        )
    }

    //GT onSuccess内调用 发布评论进行极验证
    revertCommentFunGt(verifyObj) {
        let param = this.state.commentParam;
        param.clientType =  "h5",
        param.clientIp =  this.state.clientIp;
        param.fnGeetestChallenge =  verifyObj.geetest_challenge;
        param.fnGeetestValidate =  verifyObj.geetest_validate;
        param.fnGeetestSeccode =  verifyObj.geetest_seccode;
        param.gtServerStatus =  verifyObj.gtServerStatus;
        let urlManager = new UrlManager();
        NetworkEngine(
            "post",
            urlManager.insertCommentGeetest(), param
        ).then(
            data => {
                this.state.captchaObj.reset();
                this.state.checkType = "";
                if (data.data.status === '0') {
                    this.mobileDemandComments();
                } else if (data.data.status === '0' && data.data.error_message) {
                    //失败 报错
                    this.showErrorBar(data.data.error_message);
                }
            }
        ).catch(
            err => {
                //失败执行
            }
        )
    }


    //展示提交失败信息
    showErrorBar(messageWord){
        this.setState({showError:true,errorWord:messageWord});
        setTimeout(()=>{this.setState({showError:false,errorWord:''})},3000);
    }

    //初始化极验证
    initGeetestFun() {
        const _this = this;
        let urlManager = new UrlManager();
        NetworkEngine(
            "post",
            urlManager.initGeetest(),
            {
                userId: sessionStorage.getItem("id") ? sessionStorage.getItem("id") : "",
                clientType: "h5",
                clientIp: this.state.clientIp ? this.state.clientIp : null,
            }
        ).then(
            data => {
                let gtServerStatus = data.data.res.gt_server_status;
                let responseStr = data.data.res.responseStr;
                let geetestData = JSON.parse(responseStr);
                initGeetest({
                    gt: geetestData.gt,
                    challenge: geetestData.challenge,
                    new_captcha: geetestData.new_captcha, // 用于宕机时表示是新验证码的宕机
                    offline: !geetestData.success, // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                    product: 'float',
                    width: "180px",
                    // bg_color:"custom",
                    // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
                }, function (captchaObj) {
                    _this.state.captchaObj = captchaObj;
                    // 将验证码加到id为captcha的元素里，同时会有三个input的值用于表单提交
                    captchaObj.appendTo("#captchaComment");

                    captchaObj.onReady(function () {
                        $("#waitComment").hide();
                    });

                    captchaObj.onSuccess(function(){
                        let result = captchaObj.getValidate();
                        result.gtServerStatus = gtServerStatus;
                        $(_this.refs.geetestCommentBox).hide();
                        if (_this.state.checkType === 'revert') {
                            //回复验证
                            _this.revertCommentFunGt(result);
                        } else if (_this.state.checkType === 'insert') {
                            //评论验证
                            _this.insertCommentFunGt(result);
                        }
                    });
                });
            }
        ).catch(
            err => {

            }
        )
    }

    loginIn() {
        var fileNameArr = window.location.href;
        fileNameArr = fileNameArr.split("/");
        let suffix = fileNameArr[fileNameArr.length - 1];
        localStorage.setItem("taskId", suffix);
        browserHistory.push("/Login");
    }
    render(){
        if(!this.state.detail){
            return(
            <div></div>
            )
        } else {
            let preBudgetFrom = this.moneyFormatFun(this.state.detail.preBudgetFrom);
            let preBudgetTo = this.moneyFormatFun(this.state.detail.preBudgetTo);
            let money = preBudgetTo;
            if (preBudgetFrom != preBudgetTo) {
                if (!preBudgetFrom) {
                    preBudgetFrom = 0;
                }
                money = preBudgetFrom + "-" + preBudgetTo;
            } else {
                if (!preBudgetTo) {
                    money = 0;
                }
            }
            let taskType = this.state.detail.taskTypeName;
            if (this.state.detail.taskSubtypeName) {
                taskType = taskType + "/" + this.state.detail.taskSubtypeName;
            }
            let createorHeadUrl = tx;
            if (this.state.detail.createorHeadUrl) {
                createorHeadUrl = this.state.detail.createorHeadUrl;
            }

            return(
                <div>
                    <ErrorBar showError={this.state.showError} errorWord={this.state.errorWord}/>
                    <div className="form-geetest-modal" ref="geetestCommentBox">
                        <div className="captcha">
                            <p id="waitComment" className="show">正在加载验证码......</p>
                            <div id="captchaComment">
                            </div>
                        </div>
                    </div>
                    <div ref="alertBgm" className="alert-bgm" style={{display:"none"}}>
                        <div className="alert-bgm-first">
                            <div onClick={this.demandEnter.bind(this)}>X</div>
                            <div>抱歉！手机版暂不支持报名</div>
                            <div>请通过PC端登录咪吱进行报名</div>
                            <div><button onClick={this.demandEnter.bind(this)}>确定</button></div>
                        </div>
                    </div>
                    <div ref="modalBgm" className="modal-bgm" style={{display:"none"}}>
                        {
                            this.state.typeFlg == "self" ? <p className="delete-p"><a onClick={this.deleteComment.bind(this)}>删除</a></p>
                                : <span></span>
                        }
                        <p className="reply-p">
                            <a onClick={this.replyModal.bind(this)}>回复</a>
                        </p>
                        <p>
                            <a onClick={this.cancelModal.bind(this)}>取消</a>
                        </p>
                    </div>
                    <div className="h5-wrapper-demand wrapper-demand-need"  ref="height">
                        <div className="h5-head">
                            <div onClick={this.mobileDemand.bind(this)}>
                                <img src={xiala} alt=""/>
                                <div>需求大厅</div>
                            </div>
                            {(sessionStorage.getItem('id')) ?
                                <div className='img-need'>
                                    <img src={sessionStorage.getItem("headUrl")? sessionStorage.getItem("headUrl"):head}  className="img-head" onClick={this.selfMine.bind(this)} />
                                    {(this.state.authenticationStatus === "1" || this.state.authenticationStatus === "4")
                                    && <img className="img-type"
                                            src={this.state.type == 0 ? V : qiyeV}/>}
                                </div>
                                :<div className="Ann-head"></div>
                            }
                            <div className="clear"></div>
                        </div>
                        <div className="Ann-content">
                            <ul>
                                <li>
                                    <div className="c-l">
                                        {this.state.detail.taskTitle}
                                    </div>
                                </li>
                                <li>
                                    <div>{taskType}</div>
                                    <div className="c-r">
                                        {money||'0'}元
                                    </div>
                                </li>
                                <li>
                                    <div>{this.state.detail.insertDatetime}</div>
                                    <div>已有{this.state.detail.registCount}人报名</div>
                                </li>
                                <li>
                                    <div className='demand-detail-img-box'>
                                    <img
                                        className='img-head'
                                        onClick={(e)=>{
                                        e.stopPropagation();
                                        this.queryCreator(this.state.detail.taskCreateorId)}} src={createorHeadUrl} alt=""/>
                                        { this.state.detail.authenticationType
                                        && <img className="img-type"
                                                src={this.state.detail.authenticationType === '0'? V : qiyeV}/>}
                                    </div>
                                    <span onClick={(e)=>{
                                        e.stopPropagation();
                                        this.queryCreator(this.state.detail.taskCreateorId)}}>{this.state.detail.displayName}</span>
                                    {
                                        this.state.detail.registFlg ?
                                            <div className="enroll-over" >已报名</div>
                                        :
                                            <div>{
                                                ((sessionStorage.getItem('id') && sessionStorage.getItem('id') == this.state.detail.taskCreateorId)
                                                ||(this.state.detail.status != 2 && this.state.detail.status != 3))  ?
                                                    <div></div>
                                                : <div className="enroll-button" onClick={this.demandEnroll.bind(this)} >报名</div>
                                            }</div>
                                    }
                                </li>
                            </ul>
                        </div>
                        <div className="lists">
                            <div className="lists-head">
                                <table>
                                    <tbody>
                                    <tr>
                                        <td><div className="button-1" style={{borderBottom :'.08rem solid #f7ca0f',color:'#111111',fontWeight:'500'}} onClick={(e) => {
                                            e.stopPropagation();
                                            this.tabClick(1);
                                            MtaH5.clickStat('h5_demanddetails_02');

                                        }}>需求信息</div></td>
                                        <td><div className="button-2" style={{borderBottom :'.08rem solid #fff'}} onClick={(e) => {
                                            e.stopPropagation();
                                            this.tabClick(2);
                                            MtaH5.clickStat('h5_enroll_02');
                                        }}>已报名用户</div></td>
                                        <td><div className="button-3" style={{borderBottom :'.08rem solid #fff'}} onClick={(e) => {
                                            e.stopPropagation();
                                            this.tabClick(3)
                                            MtaH5.clickStat('h5_comment');
                                        }}>客户评论</div></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div className="tab-1">
                                <div className="lists-cent">
                                    <div>需求说明</div>
                                    <div>
                                        <ul>
                                            <li>视频时长：{this.state.detail.videoSize}</li>
                                            <li>期望任务截止时间：{this.state.detail.taskDeadline}</li>
                                            <li>是否需要发票：{this.state.detail.invoiceName}</li>
                                            {this.state.detail.linkList ? <li className="link-content">视频参考链接：
                                                {
                                                    this.state.detail.linkList.map((item, i) => {
                                                        return (
                                                            <p key={i}><a  href={item} target="_blank" >视频参考链接{i+1}</a></p>
                                                        )
                                                    })
                                                }
                                                </li> : <span></span>
                                            }
                                        </ul>
                                    </div>
                                </div>
                                <div className="lists-btm">
                                    <div className="des">详情描述</div>
                                    <div>
                                        <div dangerouslySetInnerHTML={this.unescapeHTML(this.state.detail.taskContent)}>
                                        </div>
                                    </div>
                                </div>
                                <div className="attachment">
                                    <div>附件</div>
                                    <div>
                                        {this.showAttachment()}
                                    </div>
                                </div>
                            </div>
                            <div className="tab-2">
                                <div className="apply">已有{this.state.registration.length}人报名</div>
                                {this.state.registration.length > 0 ? <div className="Ann-name">
                                    {
                                        this.state.registration.map((item, i) => {
                                            return (
                                                <div key = {i}>
                                                    <div className='registration-img-box'>
                                                    <img className='img-head' onClick={(e)=>{
                                                        e.stopPropagation();
                                                        this.queryCreator(item.id)}} src={item.headUrl} alt=""/>
                                                        {
                                                            item.authStatus === '1' && <img className="img-type" src={item.type === '0' ? V : qiyeV}/>
                                                        }
                                                    </div>
                                                    <p onClick={(e)=>{
                                                        e.stopPropagation();
                                                        this.queryCreator(item.id)}} >{item.nickName}</p>
                                                </div>
                                            )
                                        })
                                    }
                                </div> : <div className="noBody">暂时无人报名</div>
                                }
                            </div>
                            <div className="tab-3">
                                <div className="Ann-comment">评论</div>
                                {this.state.commentList.length > 0 ? <div className="Ann-name">
                                    {
                                        this.state.commentList.map((item, i) => {
                                            return (
                                                <div key={i} className="box-one">
                                                    <div className="conment-name">
                                                        <img src={item.commenterHeadUrl} alt="" onClick={(e)=>{
                                                            e.stopPropagation();
                                                            this.queryCreator(item.commenterId)}} />
                                                        <div onClick={(e)=>{
                                                            e.stopPropagation();
                                                            this.showModal(item)}}>{item.commenterName}</div>
                                                        {this.logoShow(item)}
                                                        <span>{item.commentDatetime}</span>
                                                        <div className="clear"></div>
                                                    </div>
                                                    <div className="conment-content">
                                                        <div onClick={(e)=>{
                                                            e.stopPropagation();
                                                            this.showModal(item)}
                                                        }>
                                                            {item.commentContent}
                                                        </div>
                                                    </div>
                                                    {item.childrenCommentList.length > 0 ? <div className="conment-bottom"><ul>
                                                        {
                                                            item.childrenCommentList.map((childItem, k) => {
                                                                return (
                                                                    <li key={k}>
                                                                        <img src={childItem.commenterHeadUrl} alt="" onClick={(e)=>{
                                                                            e.stopPropagation();
                                                                            this.queryCreator(childItem.commenterId)}}/>
                                                                        <div className="first">
                                                                            <div onClick={(e)=>{
                                                                                e.stopPropagation();
                                                                                this.showModal(childItem)}}>{childItem.commenterName} </div>
                                                                            {this.logoShow(childItem)}
                                                                            <span>{childItem.commentDatetime}</span>
                                                                        </div>
                                                                        <div className="second"
                                                                             onClick={(e)=>{
                                                                                 e.stopPropagation();
                                                                                 this.showModal(childItem)}
                                                                             }>
                                                                            {childItem.commentContent}
                                                                        </div>
                                                                        <div className="clear"></div>
                                                                    </li>
                                                                )
                                                            })
                                                        }
                                                    </ul></div> : <div></div>
                                                    }
                                                </div>
                                            )
                                        })
                                    }
                                </div> : <div className="noComment">暂无评论</div>
                                }
                                {
                                    this.state.totalCount > this.state.defPageSize ? <div className="all-conment" onClick={this.showAllComment.bind(this)}>
                                        全部评论 <img src={xiala} alt=""/>
                                    </div> : <div></div>
                                }
                                {
                                    this.state.id ? <div className="say">
                                        <div className="text">
                                    <textarea ref="textarea" cols="30" rows="10" maxLength={1000} placeholder={this.state.placeholder}>

                                    </textarea>
                                        </div>
                                        <div className="say-btn">
                                            <div className="btn-cancle" onClick={this.cancle.bind(this)} >取消</div>
                                            {
                                                this.state.textAreaType == 0 ? <div className="btn-send" onClick={this.insertComment.bind(this)}>发送</div>
                                                    :<div className="btn-send" onClick={this.revertCommand.bind(this)}>回复</div>
                                            }

                                            <div className="clear"></div>
                                        </div>
                                    </div>: <div className="say">
                                        <div className="text-decoration">
                                            <a onClick={this.loginIn.bind(this)}>登陆</a>后，可进行评论
                                        </div>
                                    </div>
                                }
                            </div>
                        </div>
                    </div>
                </div>
            )
        }

    }
}

const DemandDetail = connect(mapStateToProps, mapDispatchToProps)(DemandDetailContainer) ;

export { DemandDetail as default } ;
